<template>
  <el-dialog
    :model-value="KpiDialogVisible"
    :title="title"
    align-center
    draggable
    width="40%"
    style="border-radius: 10px; padding: 5px 10px"
  >
    <el-form
      ref="formRef"
      :model="form"
      label-width="120px"
      class="demo-dynamic"
      size="large"
      style="margin: 20px"
      :rules="rules"
    >
      <el-form-item label="员工">
        <el-select
          style="width: 250px"
          v-model="form.empId"
          placeholder="请选择员工"
          @change="matchPosition($event, index)"
        >
          <el-option
            v-for="(item, index) in EmpList"
            :label="item.name"
            :key="index"
            :value="item.id"
          >
            {{ item.name }}
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="岗位">
        <el-select
          style="width: 250px"
          v-model="form.positionId"
          placeholder="请选择员工岗位"
        >
          <el-option
            v-for="(item, index) in PositionList"
            :label="item.position"
            :key="index"
            :value="item.positionId"
          >
            {{ item.position }}
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="条目名称">
        <el-select
          style="width: 250px"
          v-model="form.fileId"
          placeholder="请选择特殊绩效依据文件"
        >
          <el-option
            v-for="(item, index) in PdfList"
            :label="item.fileName"
            :key="index"
            :value="item.id"
          >
            {{ item.fileName }}
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="奖励金额">
        <el-input
          v-model="form.reward"
          style="width: 250px"
          placeholder="奖励金额"
        />
      </el-form-item>
      <el-form-item>
        <el-button style="width: 150px" @click="onClose">取消</el-button>
        <el-button style="width: 150px" type="primary" @click="submitForm"
          >提交</el-button
        >
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script setup>
import {
  ref,
  onBeforeMount,
  reactive,
  defineProps,
  defineEmits,
  watch,
} from "vue";
import { getEmpList } from "@/api/employee";
import { getEmpPositionList } from "@/api/position";
import { getNowList } from "@/api/pdf";
import { updateOne } from "@/api/empReward";
import { ElMessage } from "element-plus";
import declare from "@/router/modules/declare";

const props = defineProps({
  update: {
    type: Function,
    default: () => {},
  },
  close: {
    type: Function,
    default: () => {},
  },
  selectContent: {
    type: Object,
    required: true,
  },
  type: {
    type: String,
    required: true,
  },
  title: {
    type: String,
    required: true,
  },
});
watch(props, (newValue, oldValue) => {
  form.empId = newValue.selectContent.empId;
  form.positionId = newValue.selectContent.positionId;
  form.fileId = newValue.selectContent.fileId;
  form.id = newValue.selectContent.empRewardId;
  form.reward = newValue.selectContent.reward;

  EmpList.value = [];
  getEmpList().then((data) => {
    for (let i of data.data) {
      i.id = String(i.id);
      EmpList.value.push(i);
    }
  });

  PositionList.value = [];
  let empId = newValue.selectContent.empId;
  getEmpPositionList({ empId }).then((data) => {
    for (let i of data.data) {
      i.id = String(i.id);
      PositionList.value.push(i);
    }
  });

  PdfList.value = [];
  getNowList().then((data) => {
    for (let i of data.data) {
      i.id = String(i.id);
      PdfList.value.push(i);
    }
  });
});

const form = reactive({
  id: "",
  empId: "",
  positionId: "",
  fileId: "",
  reward: "",
  declare: JSON.parse(localStorage.getItem("userInfo")).id,
});

const EmpList = ref();
const PdfList = ref();
onBeforeMount(() => {
  getEmpList().then((data) => {
    EmpList.value = data.data;
  });
  getNowList().then((data) => {
    PdfList.value = data.data;
  });
});

const PositionList = ref();
const matchPosition = (empId, index) => {
  form.positionId = "";
  getEmpPositionList({ empId }).then((data) => {
    PositionList.value = data.data;
  });
};

const submitForm = () => {
  updateOne(form).then((data) => {
    if (data.code == 200) {
      ElMessage({
        message: "提交成功",
        type: "success",
      });
      props.update();
      props.close();
    }
  });
};

const onClose = () => {
  props.close();
};
</script>
<style lang="scss" scoped>
::v-deep .el-form-item__label:before {
  content: "* ";
  color: red;
}
.ins {
  ::v-deep .el-form-item__label:before {
    content: " ";
  }
}
</style>
